<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛博梗探 - 热梗翻译器</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --neon-pink: #ff2a6d;
            --neon-blue: #05d9e8;
            --neon-purple: #d300c5;
            --cyber-dark: #0d0221;
            --cyber-light: #d1f7ff;
            --cyber-accent: #f6019d;
        }
        
        @font-face {
            font-family: 'Cyber';
            src: url('https://fonts.cdnfonts.com/css/cyberpunk-is-not-dead') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        
        body {
            font-family: 'Cyber', 'Segoe UI', sans-serif;
            background-color: var(--cyber-dark);
            color: var(--cyber-light);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background-image: 
                linear-gradient(rgba(13, 2, 33, 0.9), rgba(13, 2, 33, 0.9)),
                url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="10" height="10" x="0" y="0" fill="%23ff2a6d" opacity="0.1"/></svg>');
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
            position: relative;
            z-index: 1;
        }
        
        header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            padding: 1rem;
            border-bottom: 1px solid var(--neon-blue);
            box-shadow: 0 0 20px var(--neon-blue);
        }
        
        h1 {
            font-size: 4rem;
            margin: 0;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
            letter-spacing: 2px;
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
            border-radius: 3px;
        }
        
        .tagline {
            font-size: 1.3rem;
            color: var(--neon-blue);
            margin-top: 0.5rem;
            text-shadow: 0 0 10px rgba(5, 217, 232, 0.5);
            letter-spacing: 1px;
        }
        
        .cyber-grid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(255, 42, 109, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 42, 109, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            pointer-events: none;
        }
        
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
            gap: 1rem;
            position: relative;
        }
        
        .tab {
            padding: 1rem 2.5rem;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--neon-blue);
            border-radius: 0;
            color: var(--cyber-light);
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
            clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
        }
        
        .tab:hover {
            background: rgba(5, 217, 232, 0.2);
            text-shadow: 0 0 10px var(--neon-blue);
        }
        
        .tab.active {
            background: linear-gradient(90deg, rgba(255, 42, 109, 0.3), rgba(5, 217, 232, 0.3));
            border-color: var(--neon-pink);
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.5), 0 0 15px rgba(5, 217, 232, 0.5);
            color: white;
        }
        
        .tab-content {
            display: none;
            animation: glitch 0.5s ease;
        }
        
        .tab-content.active {
            display: block;
        }
        
        @keyframes glitch {
            0% { opacity: 0; transform: translateY(10px) skewX(-10deg); }
            50% { opacity: 0.5; transform: translateY(5px) skewX(10deg); }
            100% { opacity: 1; transform: translateY(0) skewX(0); }
        }
        
        /* 解释热梗部分 */
        .explain-section {
            background: rgba(13, 2, 33, 0.7);
            border-radius: 0;
            padding: 2rem;
            border: 1px solid var(--neon-blue);
            box-shadow: 0 0 20px rgba(5, 217, 232, 0.3);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .explain-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 42, 109, 0.1), transparent);
            transition: 0.5s;
        }
        
        .explain-section:hover::before {
            left: 100%;
        }
        
        .input-group {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .input-group input {
            flex: 1;
            padding: 1rem 1.5rem;
            border: none;
            border-radius: 0;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            font-size: 1.1rem;
            border: 1px solid var(--neon-blue);
            transition: all 0.3s ease;
            font-family: 'Cyber', sans-serif;
            letter-spacing: 1px;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: var(--neon-pink);
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
            background: rgba(0, 0, 0, 0.7);
        }
        
        .input-group input::placeholder {
            color: rgba(209, 247, 255, 0.5);
            letter-spacing: 1px;
        }
        
        .btn {
            padding: 1rem 2.5rem;
            background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple));
            border: none;
            border-radius: 0;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
            font-family: 'Cyber', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 25px rgba(255, 42, 109, 0.8);
            text-shadow: 0 0 10px white;
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: rotate(45deg);
            transition: 0.5s;
        }
        
        .btn:hover::after {
            left: 100%;
        }
        
        .result-container {
            margin-top: 2rem;
            padding: 1.5rem;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0;
            border-left: 4px solid var(--neon-pink);
            display: none;
            position: relative;
            overflow: hidden;
        }
        
        .result-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(255, 42, 109, 0.05), transparent);
            pointer-events: none;
        }
        
        .result-title {
            font-size: 1.8rem;
            margin-top: 0;
            color: var(--neon-blue);
            text-shadow: 0 0 10px rgba(5, 217, 232, 0.5);
            border-bottom: 1px solid var(--neon-pink);
            padding-bottom: 0.5rem;
            display: inline-block;
        }
        
        .result-content {
            line-height: 1.8;
            font-size: 1.1rem;
        }
        
        .result-content strong {
            color: var(--neon-pink);
        }
        
        /* 热梗排行部分 */
        .trending-section {
            background: rgba(13, 2, 33, 0.7);
            border-radius: 0;
            padding: 2rem;
            border: 1px solid var(--neon-blue);
            box-shadow: 0 0 20px rgba(5, 217, 232, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .trending-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(90deg, transparent, rgba(211, 0, 197, 0.1), transparent),
                linear-gradient(transparent, rgba(5, 217, 232, 0.1), transparent);
            pointer-events: none;
        }
        
        .ranking-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--neon-pink);
            padding-bottom: 1rem;
        }
        
        .refresh-btn {
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid var(--neon-blue);
            border-radius: 0;
            color: var(--cyber-light);
            padding: 0.7rem 1.5rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
            font-family: 'Cyber', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
        }
        
        .refresh-btn:hover {
            background: rgba(5, 217, 232, 0.2);
            text-shadow: 0 0 10px var(--neon-blue);
            box-shadow: 0 0 15px rgba(5, 217, 232, 0.3);
        }
        
        .refresh-btn svg {
            transition: transform 0.5s ease;
        }
        
        .refresh-btn:hover svg {
            transform: rotate(360deg);
        }
        
        .ranking-list {
            display: grid;
            gap: 1rem;
        }
        
        .ranking-item {
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0;
            padding: 1rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid transparent;
        }
        
        .ranking-item:hover {
            background: rgba(255, 42, 109, 0.1);
            border-color: var(--neon-pink);
            transform: translateX(10px);
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.3);
        }
        
        .rank {
            font-size: 1.5rem;
            font-weight: bold;
            width: 60px;
            text-align: center;
            color: var(--neon-blue);
            text-shadow: 0 0 10px rgba(5, 217, 232, 0.5);
        }
        
        .rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); }
        .rank-2 { color: #c0c0c0; text-shadow: 0 0 10px rgba(192, 192, 192, 0.7); }
        .rank-3 { color: #cd7f32; text-shadow: 0 0 10px rgba(205, 127, 50, 0.7); }
        
        .trend-info {
            flex: 1;
        }
        
        .trend-name {
            font-size: 1.3rem;
            margin: 0 0 0.3rem 0;
            color: white;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }
        
        .trend-origin {
            font-size: 0.9rem;
            color: var(--neon-blue);
            margin: 0;
        }
        
        .trend-popularity {
            width: 100px;
            text-align: right;
            color: var(--neon-pink);
            font-weight: bold;
            font-size: 1.2rem;
            text-shadow: 0 0 10px rgba(255, 42, 109, 0.5);
        }
        
        .chart-container {
            margin-top: 2rem;
            height: 300px;
            position: relative;
        }
        
        /* 加载动画 */
        .loader {
            display: none;
            text-align: center;
            margin: 2rem 0;
        }
        
        .loader-circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: var(--neon-pink);
            border-radius: 50%;
            margin: 0 10px;
            animation: bounce 1.4s infinite ease-in-out both;
            box-shadow: 0 0 15px var(--neon-pink);
        }
        
        .loader-circle:nth-child(1) {
            animation-delay: -0.32s;
        }
        
        .loader-circle:nth-child(2) {
            background-color: var(--neon-blue);
            box-shadow: 0 0 15px var(--neon-blue);
            animation-delay: -0.16s;
        }
        
        .loader-circle:nth-child(3) {
            background-color: var(--neon-purple);
            box-shadow: 0 0 15px var(--neon-purple);
        }
        
        @keyframes bounce {
            0%, 80%, 100% { 
                transform: scale(0);
                opacity: 0.5;
            } 
            40% { 
                transform: scale(1);
                opacity: 1;
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 2.5rem;
            }
            
            .input-group {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
            
            .ranking-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .trend-popularity {
                text-align: left;
                width: auto;
                margin-top: 0.5rem;
            }
            
            .tab {
                padding: 0.8rem 1.5rem;
                font-size: 0.9rem;
            }
        }
        
        /* 霓虹灯效果 */
        .neon-text {
            text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
            animation: flicker 1.5s infinite alternate;
        }
        
        @keyframes flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
            }
            20%, 24%, 55% {        
                text-shadow: none;
            }
        }
        
        /* 扫描线效果 */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 4px 4px;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: overlay;
        }
        
        /* 数字雨效果 */
        .digital-rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            opacity: 0.1;
        }
        
        .digital-column {
            position: absolute;
            top: -100%;
            color: var(--neon-blue);
            font-size: 16px;
            writing-mode: vertical-rl;
            text-orientation: upright;
            text-shadow: 0 0 5px var(--neon-blue);
            animation: rain linear infinite;
        }
        
        @keyframes rain {
            to {
                top: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="cyber-grid"></div>
    <div class="digital-rain" id="digital-rain"></div>
    <div class="scanlines"></div>
    
    <div class="container">
        <header>
            <h1>赛博梗探</h1>
            <p class="tagline"> AI 驱动的网络热梗分析系统</p>
        </header>
        
        <div class="tabs">
            <button class="tab active" data-tab="explain">梗解释</button>
            <button class="tab" data-tab="trending">热梗排行</button>
        </div>
        
        <div class="tab-content active" id="explain">
            <div class="explain-section">
                <h2>🔍 网络热梗分析</h2>
                <p>输入你不懂的网络热梗，AI将为你解码它的起源、含义和使用场景</p>
                
                <div class="input-group">
                    <input type="text" id="meme-input" placeholder="输入热梗，例如：尊嘟假嘟、泰酷辣、CPU我..." autocomplete="off">
                    <button class="btn" id="explain-btn">解码分析</button>
                </div>
                
                <div class="loader" id="explain-loader">
                    <div class="loader-circle"></div>
                    <div class="loader-circle"></div>
                    <div class="loader-circle"></div>
                </div>
                
                <div class="result-container" id="explain-result">
                    <h3 class="result-title" id="result-title"></h3>
                    <div class="result-content" id="result-content"></div>
                </div>
            </div>
            
            <div class="explain-section">
                <h2>💾 热门梗数据库</h2>
                <div class="examples">
                    <button class="btn example-btn" data-meme="尊嘟假嘟">尊嘟假嘟</button>
                    <button class="btn example-btn" data-meme="泰酷辣">泰酷辣</button>
                    <button class="btn example-btn" data-meme="CPU我">CPU我</button>
                    <button class="btn example-btn" data-meme="挖呀挖">挖呀挖</button>
                    <button class="btn example-btn" data-meme="绝绝子">绝绝子</button>
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="trending">
            <div class="trending-section">
                <div class="ranking-header">
                    <h2>📈 实时热梗排行榜</h2>
                    <button class="refresh-btn" id="refresh-btn">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="23 4 23 10 17 10"></polyline>
                            <polyline points="1 20 1 14 7 14"></polyline>
                            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                        </svg>
                        数据同步
                    </button>
                </div>
                
                <div class="loader" id="trending-loader">
                    <div class="loader-circle"></div>
                    <div class="loader-circle"></div>
                    <div class="loader-circle"></div>
                </div>
                
                <div class="ranking-list" id="ranking-list">
                    <!-- 排行榜内容将通过JS动态生成 -->
                </div>
                
                <div class="chart-container">
                    <canvas id="trend-chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 数字雨效果
        function createDigitalRain() {
            const container = document.getElementById('digital-rain');
            const columns = Math.floor(window.innerWidth / 20);
            
            for (let i = 0; i < columns; i++) {
                const column = document.createElement('div');
                column.className = 'digital-column';
                column.style.left = `${i * 20}px`;
                column.style.animationDuration = `${Math.random() * 2 + 1}s`;
                column.style.animationDelay = `${Math.random() * 2}s`;
                
                // 生成随机数字
                let numbers = '';
                const length = Math.floor(Math.random() * 10) + 10;
                for (let j = 0; j < length; j++) {
                    numbers += Math.floor(Math.random() * 2);
                }
                
                column.textContent = numbers;
                container.appendChild(column);
            }
        }
        
        // 切换标签页
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelector('.tab.active').classList.remove('active');
                tab.classList.add('active');
                
                const tabId = tab.getAttribute('data-tab');
                document.querySelector('.tab-content.active').classList.remove('active');
                document.getElementById(tabId).classList.add('active');
                
                // 如果是热梗排行标签，加载数据
                if (tabId === 'trending' && document.getElementById('ranking-list').children.length === 0) {
                    loadTrendingData();
                }
            });
        });
        
        // 示例按钮点击
        document.querySelectorAll('.example-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const meme = btn.getAttribute('data-meme');
                document.getElementById('meme-input').value = meme;
                explainMeme(meme);
            });
        });
        
        // 解释热梗
        document.getElementById('explain-btn').addEventListener('click', () => {
            const meme = document.getElementById('meme-input').value.trim();
            if (meme) {
                explainMeme(meme);
            } else {
                alert('请输入要解释的热梗！');
                // 添加红色边框效果
                const input = document.getElementById('meme-input');
                input.style.borderColor = 'red';
                input.style.boxShadow = '0 0 15px red';
                setTimeout(() => {
                    input.style.borderColor = 'var(--neon-blue)';
                    input.style.boxShadow = 'none';
                }, 1000);
            }
        });
        
        // 刷新榜单
        document.getElementById('refresh-btn').addEventListener('click', loadTrendingData);
        
        // 解释热梗函数 - 实际调用DeepSeek API
        async function explainMeme(meme) {
            const resultContainer = document.getElementById('explain-result');
            const loader = document.getElementById('explain-loader');
            const title = document.getElementById('result-title');
            const content = document.getElementById('result-content');
            
            // 显示加载动画
            resultContainer.style.display = 'none';
            loader.style.display = 'block';
            
            try {
                // 调用DeepSeek API
                const apiKey = 'sk-c6a7fb0a88f04c45a858716ce9aec15c'; // 替换为你的实际API密钥
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat",
                        messages: [
                            {
                                role: "system",
                                content: "你是一个网络热梗专家，能够详细解释各种网络流行语的来源、含义和使用场景。回答要专业、有趣且详细。"
                            },
                            {
                                role: "user",
                                content: `请详细解释网络热梗"${meme}"，包括：1.起源 2.含义 3.使用场景 4.流行程度(1-5星)。用中文回答，使用适当的HTML标签格式化。`
                            }
                        ],
                        temperature: 0.7,
                        max_tokens: 1000
                    })
                });
                
                const data = await response.json();
                
                // 显示结果
                if (data.choices && data.choices[0].message.content) {
                    title.textContent = meme;
                    content.innerHTML = data.choices[0].message.content;
                } else {
                    title.textContent = "解析失败";
                    content.innerHTML = `无法获取"${meme}"的解释，请稍后再试或尝试其他梗。`;
                }
                
                loader.style.display = 'none';
                resultContainer.style.display = 'block';
                
                // 添加特效
                resultContainer.style.animation = 'none';
                void resultContainer.offsetWidth; // 触发重绘
                resultContainer.style.animation = 'glitch 0.5s ease';
                
            } catch (error) {
                console.error('Error:', error);
                loader.style.display = 'none';
                title.textContent = "系统错误";
                content.textContent = "调用AI服务时出错，请检查网络连接或稍后再试。";
                resultContainer.style.display = 'block';
            }
        }
        
        // 加载热梗排行数据 - 实际调用DeepSeek API
        async function loadTrendingData() {
            const rankingList = document.getElementById('ranking-list');
            const loader = document.getElementById('trending-loader');
            const chartCanvas = document.getElementById('trend-chart');
            
            // 显示加载动画
            rankingList.innerHTML = '';
            loader.style.display = 'block';
            
            try {
                // 调用DeepSeek API获取热梗排行
                const apiKey = 'sk-c6a7fb0a88f04c45a858716ce9aec15c'; // 替换为你的实际API密钥
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: "deepseek-chat",
                        messages: [
                            {
                                role: "system",
                                content: "你是一个网络热梗分析系统，能够列出当前最流行的网络热梗并给出它们的来源和热度指数。"
                            },
                            {
                                role: "user",
                                content: "请列出当前最流行的10个中文网络热梗，格式为JSON数组，每个对象包含name(梗名)、origin(来源)和popularity(热度0-100)属性。"
                            }
                        ],
                        temperature: 0.5,
                        response_format: { type: "json_object" }
                    })
                });
                
                const data = await response.json();
                let trendingData = [];
                
                // 解析响应数据
                if (data.choices && data.choices[0].message.content) {
                    try {
                        const content = JSON.parse(data.choices[0].message.content);
                        if (content.trending) {
                            trendingData = content.trending;
                        } else {
                            // 如果API返回的不是预期格式，使用模拟数据
                            trendingData = getMockTrendingData();
                        }
                    } catch (e) {
                        console.error("解析JSON失败:", e);
                        trendingData = getMockTrendingData();
                    }
                } else {
                    trendingData = getMockTrendingData();
                }
                
                // 生成排行榜
                trendingData.forEach((item, index) => {
                    const rankItem = document.createElement('div');
                    rankItem.className = 'ranking-item';
                    rankItem.innerHTML = `
                        <div class="rank rank-${index < 3 ? index+1 : ''}">${index + 1}</div>
                        <div class="trend-info">
                            <h3 class="trend-name">${item.name}</h3>
                            <p class="trend-origin">来源：${item.origin}</p>
                        </div>
                        <div class="trend-popularity">${item.popularity}%</div>
                    `;
                    rankingList.appendChild(rankItem);
                });
                
                // 更新图表
                updateChart(trendingData);
                
                loader.style.display = 'none';
                
                // 添加特效
                rankingList.style.animation = 'none';
                void rankingList.offsetWidth; // 触发重绘
                rankingList.style.animation = 'glitch 0.5s ease';
                
            } catch (error) {
                console.error('Error:', error);
                loader.style.display = 'none';
                rankingList.innerHTML = '<p style="text-align: center; color: var(--neon-pink);">数据加载失败，请点击"数据同步"重试</p>';
            }
        }
        
        // 获取模拟热梗数据
        function getMockTrendingData() {
            return [
                { name: "尊嘟假嘟", origin: "方言发音梗", popularity: 95 },
                { name: "泰酷辣", origin: "谐音梗", popularity: 92 },
                { name: "挖呀挖", origin: "儿歌洗脑", popularity: 88 },
                { name: "CPU我", origin: "PUA谐音", popularity: 85 },
                { name: "绝绝子", origin: "网络流行语", popularity: 82 },
                { name: "栓Q", origin: "Thank you谐音", popularity: 78 },
                { name: "躺平", origin: "社会现象", popularity: 75 },
                { name: "YYDS", origin: "永远的神拼音缩写", popularity: 72 },
                { name: "社死", origin: "社会性死亡", popularity: 68 },
                { name: "破防", origin: "游戏术语衍生", popularity: 65 }
            ];
        }
        
        // 更新图表
        function updateChart(data) {
            const ctx = document.getElementById('trend-chart').getContext('2d');
            
            // 如果已有图表实例，先销毁
            if (window.trendChart) {
                window.trendChart.destroy();
            }
            
            // 准备图表数据
            const labels = data.map(item => item.name);
            const popularityData = data.map(item => item.popularity);
            const backgroundColors = data.map((_, index) => {
                if (index === 0) return 'rgba(255, 42, 109, 0.7)';
                if (index === 1) return 'rgba(5, 217, 232, 0.7)';
                if (index === 2) return 'rgba(211, 0, 197, 0.7)';
                return `rgba(${Math.floor(Math.random() * 155 + 100)}, ${Math.floor(Math.random() * 155 + 100)}, ${Math.floor(Math.random() * 155 + 100)}, 0.7)`;
            });
            
            window.trendChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '热梗热度指数',
                        data: popularityData,
                        backgroundColor: backgroundColors,
                        borderColor: backgroundColors.map(color => color.replace('0.7', '1')),
                        borderWidth: 1,
                        borderRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `热度: ${context.raw}%`;
                                }
                            },
                            backgroundColor: 'rgba(13, 2, 33, 0.9)',
                            borderColor: 'var(--neon-blue)',
                            borderWidth: 1,
                            titleColor: 'var(--neon-pink)',
                            bodyColor: 'var(--cyber-light)',
                            padding: 10
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: 'var(--neon-blue)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: 'var(--neon-blue)',
                                font: {
                                    family: "'Cyber', sans-serif"
                                }
                            }
                        }
                    },
                    animation: {
                        duration: 1500,
                        easing: 'easeOutBack'
                    }
                }
            });
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            createDigitalRain();
            
            // 为输入框添加动画效果
            const input = document.getElementById('meme-input');
            input.addEventListener('focus', () => {
                input.style.boxShadow = '0 0 15px var(--neon-blue)';
                input.style.borderColor = 'var(--neon-pink)';
            });
            input.addEventListener('blur', () => {
                input.style.boxShadow = 'none';
                input.style.borderColor = 'var(--neon-blue)';
            });
            
            // 添加回车键事件
            input.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    document.getElementById('explain-btn').click();
                }
            });
            
            // 添加随机故障效果
            setInterval(() => {
                if (Math.random() > 0.9) {
                    document.body.style.filter = 'contrast(1.5)';
                    setTimeout(() => {
                        document.body.style.filter = 'none';
                    }, 100);
                }
            }, 5000);
        });
    </script>
</body>
</html>